import { defineComponent, ref, defineExpose } from 'vue'

export default defineComponent({
  name: 'demo',
  emits: ['itemClick'],
  props: {
    title: {
      type: String,
      default: 'demo',
    },
  },
  // 可以直接暴露data内的数据和methods内的方法,优先级最高
  // expose: ['hiData', 'a', 'hiClick'],
  data() {
    return {
      hiData: 'hi!',
      a: '123321',
    }
  },
  methods: {
    hiClick() {
      this.hiData = 'hiClick!'
      console.log(this.hiData)
    },
  },
  setup(props, ctx) {
    const { slots, emit, expose } = ctx
    const hi = ref('hi!')
    // //也可以指定暴露数据
    expose({
      hi,
    })
    return () => (
      <>
        <div>{hi.value}</div>
        <div
          onClick={() => {
            emit('itemClick', props.title)
            // this.hiClick()
          }}
        >
          {props.title}
        </div>
      </>
    )
  },
})
